<template>
  <common-wrap title="详情">
    <div v-if="detail">
      <el-row>
        <el-col :span="8" class="detail-info-item">
          <div class="detail-info__label">状态</div>
          <div class="detail-info__content">{{ detail.statusValue }}</div>
        </el-col>
        <el-col :span="8" class="detail-info-item">
          <div class="detail-info__label">优先级</div>
          <div class="detail-info__content">{{ detail.priorityValue }}</div>
        </el-col>
        <el-col :span="8" class="detail-info-item">
          <div class="detail-info__label">类型</div>
          <div class="detail-info__content">{{ detail.typeVlaue }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="detail-info-item">
          <div class="detail-info__label">受试者</div>
          <div class="detail-info__content">{{ detail.sic }}</div>
        </el-col>
        <el-col :span="8" class="detail-info-item">
          <div class="detail-info__label">访视</div>
          <div class="detail-info__content">{{ detail.name }}</div>
        </el-col>
        <el-col :span="8" class="detail-info-item">
          <div class="detail-info__label">Point</div>
          <div class="detail-info__content">{{ detail.pointValue }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="detail-info-item">
          <div class="detail-info__label">备注</div>
          <div class="detail-info__content">{{ detail.remark }}</div>
        </el-col>
      </el-row>
    </div>
    <!-- <el-form :model="form" label-width="80px" :inline="false" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="优先级">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="受试者">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="访视">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Point">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="访视时间">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建议日期">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划日期">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="备注">
            <el-input v-model="form.status" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>-->

    <el-row class="detail-box">
      <el-col :span="6">
        <div class></div>
      </el-col>
    </el-row>
  </common-wrap>

  <common-wrap title="时间">
    <el-row>
      <el-col :span="8" class="detail-info-item">
        <div class="detail-info__label">访视</div>
        <div class="detail-info__content">{{ detail.visitTime }}</div>
      </el-col>
      <el-col :span="8" class="detail-info-item">
        <div class="detail-info__label">建议</div>
        <div class="detail-info__content">
          {{ detail.suggestDate }}&nbsp;(±{{ detail.suggestScope }})
        </div>
      </el-col>
      <el-col :span="8" class="detail-info-item">
        <div class="detail-info__label">计划</div>
        <div class="detail-info__content">{{ detail.planTime }}</div>
      </el-col>
    </el-row>
  </common-wrap>
</template>

<script lang="ts" setup>
import { defineProps, reactive } from 'vue'

import CommonWrap from '@/components/CommonWrap/index.vue'

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})

console.log(props.detail)
const form = reactive({
  status: '',
})
</script>

<style lang="scss" scoped>
.detail-info {
  &-item {
    display: flex;
    margin-bottom: 18px;
    line-height: 32px;
  }

  &__label {
    width: 80px;
    padding-right: 12px;
    font-size: var(--el-form-label-font-size);
    font-weight: 700;
    color: var(--el-text-color-regular);
    text-align: right;
  }
}
</style>
